<!-- subpkg_medicine/pay_result/index.vue -->
<script setup>
  import { ref } from 'vue'
  import { getPatientMedicineOrderDetailApi } from '@/services/medicine'
  const props = defineProps()
  const payResult = JSON.parse(props.payResult)

  const orderInfo = ref({})

  ;(async () => {
    const res = await getPatientMedicineOrderDetailApi(props.orderId)
    orderInfo.value = res.data
  })()
</script>

<template>
  <view class="pay-result-page">
    <view class="result">
      <uni-icons
        v-if="payResult"
        :size="70"
        color="#20c6b2"
        type="checkbox-filled"
      />
      <uni-icons v-else :size="70" color="#e06c75" type="clear" />
      <view class="amount">¥ {{ orderInfo.actualPayment?.toFixed(2) }}</view>
      <template v-if="payResult">
        <view class="label">支付成功</view>
        <view class="tips">订单支付成功，已通知药房尽快发出，请耐心等待~</view>
      </template>
      <template v-else>
        <view class="label">支付失败</view>
        <view class="tips">订单支付失败，请尽快完成支付~</view>
      </template>
    </view>

    <view class="buttons">
      <navigator
        hover-class="none"
        :url="`/subpkg_medicine/order_detail/index?orderId=${props.orderId}`"
        class="uni-button"
      >
        查看订单
      </navigator>
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/room/index?orderId=${orderInfo.roomId}`"
        class="uni-button plain"
      >
        返回诊室
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
  // subpkg_medicine/pay_result/index.scss
  .pay-result-page {
    padding: 100rpx 60rpx;
  }

  .result {
    line-height: 1;
    text-align: center;

    .amount {
      font-size: 44rpx;
      font-weight: 600;
      color: #333;
      margin-top: 30rpx;
    }

    .label {
      font-size: 28rpx;
      color: #3c3e42;
      margin-top: 20rpx;
    }

    .tips {
      line-height: 1.5;
      padding: 0 70rpx;
      font-size: 28rpx;
      color: #979797;
      margin-top: 40rpx;
    }
  }

  .buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 60rpx;
  }

  .uni-button {
    width: 280rpx;

    &.plain {
      background-color: #fff;
      color: #20c6b2;
      border: 1px solid #20c6b2;
    }
  }
</style>
